<!DOCTYPE html>
<html>
<head>
	<title>首页大图</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="bootstrap.min.css">
	<link rel="stylesheet" href="../../css/bootstrap.min.css">
	<link rel="stylesheet" href="../../css/font-awesome.min.css">
	<link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
	<link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
	<link rel="stylesheet" href="../../css/main.css">
	<script src="../../libs/jquery.min.js"></script>
	<script src="../../plugins/layer/layer.js"></script>
	<script src="../../libs/bootstrap.min.js"></script>
	<script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
	<script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
	<script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../libs/ajaxupload.js"></script>
	<style>
		 .list-complete-item {
			 transition: all 1s;
			 height:230px;
			 line-height: 230px;
			 background:#F8F8F8;
			 text-align: center;
			 font-size:24px;
			 margin-top:0px;
		 }
		 .styleclass{
			 width:100px;
			 float:left;
		 }
		 .list-complete-enter, .list-complete-leave-active {
			 opacity: 0;
			 height: 0px;
			 margin-top: 0px;
			 padding: 0px;
			 border: solid 0px;
		 }
		 .list-complete-sortable-chosen,.list-complete-sortable-ghost{
			 opacity: 0;
			 height: 0px;
			 margin-top: 0px;
			 padding: 0px;
			 border: solid 0px;
		 }
		 .dargDiv{
			 cursor:move;
		 }
		 .wrods{
			 margin-top:0px;
		 }
		 p{
			 line-height:24px;
			 text-align:center;
		 }
	</style>
</head>
<body>
	<div id="pgbanner" v-cloak>
		<div v-show="showList" class="panel panel-info">

			<div class="panel-heading">
				<div class="row panel-title" >
					<div class="col-md-10"></div>
					<div class="col-md-2">
						<a  class="btn btn-primary" @click="addBanner"><i class="fa fa-plus"></i>&nbsp;新增</a>
					</div>
				</div>
			</div>
			<div class="panel-body">
				<draggable :list="bannerList" :move="getdata" @update="datadragEnd" :options="{animation: 300,handle:'.dargDiv'}" class="row">
					<transition-group name="list-complete"  >
						<div v-for="element in bannerList" :key="element.bannerId" class="dargDiv thumbnail  list-complete-item col-sm-6 col-md-3">
									<img style="max-height: 100px;height: 100px" :src="element.bannerPic"
										 :alt="element.bannerSubject">
									<div class="caption" style="padding-top: 5px;padding-bottom:0px;max-height: 40px">
										<h3><a :href="element.bannerAction" target="_blank">{{element.bannerSubject}}</a></h3>
										<p>
											<a href="#" class="btn btn-danger" role="button" @click="delBanner(element.bannerId)">删除</a>
											<a href="#" class="btn btn-primary" role="button" @click="updateBanner(element.bannerId)">更新</a>
										</p>
									</div>
						</div>
					</transition-group>
				</draggable>
			</div>
		</div>

		<div v-show="!showList" class="panel panel-default">
			<div class="panel-heading">{{title}}</div>

			<form class="form-horizontal">
				<div class="form-group">
					<div class="col-sm-2 control-label">头图主题</div>
					<div class="col-sm-10">
						<input maxlength="40" type="text" class="form-control" v-model="banner.bannerSubject" required placeholder="不超过40个字符"/>
					</div>
				</div>
				<div class="form-group" >
					<div class="col-sm-2 control-label">头图图片</div>
					<div class="col-sm-2 control-label">
						<input  id="file_upload" type="file" v-on:change="fileUpload()"></input>
					</div>
				</div>
				<div v-if="banner.bannerPic" class="form-group">
					<div class="col-sm-2 control-label">预览</div>
					<div class="col-sm-2 control-label">
						<img :src="banner.bannerPic" width="375" height="140"></img>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">头图链接</div>
					<div class="col-sm-10">
						<input type="text" class="form-control" v-model="banner.bannerAction" placeholder="图片跳转链接"/>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label"></div>
					<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
					&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="getBannerList" value="返回"/>
				</div>
			</form>
		</div>
	</div>

	<script src="../../js/require.js" data-main="../../js/modules/sys/banner"></script>
</body>
</html>